<template>
  <div class="home">
    <!-- mint-ui轮播图组件默认没有样式，高度为0，我们需要给它添加样式设置高度 -->
     <mt-swipe :auto="2000" class="swiper">
      <!-- 循环 -->
  <mt-swipe-item v-for="(item, index) in imgList" :key="index">
        <img :src="item" alt="轮播图">
      </mt-swipe-item>
</mt-swipe>
<!-- 导航 -->
<div>
      <ul class="nav-box">
         <!-- 优化 处理 做成循坏 -->
        <li class="nav-item" @click="jumpTo(item.urlName)" v-for="(item, index) in navList" :key="index">
          <i><img :src="item.imgurl" alt=""></i>
          <p>{{item.title}}</p>
        </li>
      </ul>
    </div>
    <!-- 底部 组件 -->
    <tabbar></tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
import tabbar from '@/components/tabbar'
export default {
  name: 'home',
  components: {
    tabbar
  },
  data () {
    return {
      // 模拟轮播图数据
      imgList: [
        'http://m.itcast.cn/images/newslide/homepageandphone/20181528141522828.jpg',
        'http://m.itcast.cn/images/newslide/homepageandphone/20180918170957294.jpg',
        'http://m.itcast.cn/images/newslide/homepageandphone/20184827134845878.jpg'
      ],
      navList: [
        { imgurl: require('../assets/imgs/menu01.png'), title: '新闻资讯', urlName: 'newslist' },
        { imgurl: require('../assets/imgs/menu02.png'), title: '图片分享', urlName: '' },
        { imgurl: require('../assets/imgs/menu03.png'), title: '商品购买', urlName: '' },
        { imgurl: require('../assets/imgs/menu04.png'), title: '留言反馈', urlName: '' },
        { imgurl: require('../assets/imgs/menu05.png'), title: '视频专区', urlName: '' },
        { imgurl: require('../assets/imgs/menu06.png'), title: '反馈我们', urlName: '' }
      ]
    }
  },
  methods: {
    jumpTo (urlName) {
      this.$router.push({ name: urlName })
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  .swiper {
    height: 205px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .nav-box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    .nav-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 33.33%;
      margin: 10px 0;
      cursor: pointer;
      p {
        font-size: 20px;
      }
      img {
        width: 60px;
        height: 60px;
      }
    }
  }
}
</style>
